﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
    <link href="~/css/stepcss.css" rel="stylesheet" />
<script>
    layui.use(['jquery', 'form', 'laydate', 'optimizeSelectOption', 'common', 'step'], function () {
        var form = layui.form,
            $ = layui.$,
            common = layui.common,
            laydate = layui.laydate;
        upload = layui.upload,
            step = layui.step;
        var keyValue = $.request("keyValue");
        //权限字段
        common.authorizeFields('stepForm');
        wcLoading.close();
        //此处需修改
        //类型为时间时
        //laydate.render({
        //elem: '#F_Birthday'
        //, btns: ['clear', 'now']
        //, trigger: 'click',
        //format: 'yyyy-MM-dd',
        //});
        var postData = {};//分步骤表单，最终提交只能获取最后一个表单的数据，所以定义全局数组保存表单数据
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '600px',
            stepItems: [{
                title: '基本信息'
            }, {
                title: '详细描述'
            }, {
                title: 'SEO选项'
            }]
        });
        form.on('submit(formStep)', function (data) {
            postData = $.extend(postData, data.field);
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            postData = $.extend(postData, data.field);
            postData["F_Description"] = UE.getEditor('F_Description').getContent();
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
        $(function () {
            initControl();
            if (!!keyValue) {
                var newsdata = JSON.parse('@Html.Raw(ViewBag.Content)');
                postData = newsdata;
                common.val('stepForm', newsdata);
                var Description = newsdata.F_Description;
                if (!!newsdata.ImgUrl) {
                    ImgUrlPic.src = newsdata.ImgUrl;
                }
                // editor准备好之后才可以使用
                var editor = UE.getEditor("F_Description");
                editor.ready(function () {
                    editor.setContent(Description);
                });
                //减少请求数
                //common.ajax({
                //    url: '/ContentManage/ArticleNews/GetFormJson',
                //    dataType: 'json',
                //    data: { keyValue: keyValue },
                //    async: false,
                //    success: function (data) {
                //    }
                //});
            }
            form.render();
        });

        function initControl() {
            //绑定数据源
            //类型为下拉框时
            $("#F_CategoryId").bindSelect({
                url: "/ContentManage/ArticleCategory/GetListJson",
                id: "F_Id",
                text: "F_FullName",
                search: true,
            });
        }
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            // 单击之后提交按钮不可选,防止重复提交
            $('.site-demo-active').addClass('layui-btn-disabled');
            $('.site-demo-active').attr('disabled', 'disabled');
            postData = $.extend(postData, data.field);
            if (!postData["F_IsTop"]) postData["F_IsTop"] = false;
            if (!postData["F_IsHot"]) postData["F_IsHot"] = false;
            if (!postData["F_IsRed"]) postData["F_IsRed"] = false;
            if (!postData["F_EnabledMark"]) postData["F_EnabledMark"] = false;
            common.submitForm({
                url: '/ContentManage/ArticleNews/SubmitForm?keyValue=' + keyValue,
                param: postData,
                success: function () {
                    common.reloadIframe("/ContentManage/ArticleNews/Index", 'data-search-btn');
                }
            })
            return false;
        });
    });
</script>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm">
                <div carousel-item>
                    <div>
                        <form class="layui-form layuimini-form">
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">新闻类别</label>
                                <div class="layui-input-block">
                                    <select id="F_CategoryId" name="F_CategoryId" lay-filter="F_CategoryId" lay-verify="required" lay-search>
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">内容标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_Title" name="F_Title" autocomplete="off" maxlength="200" lay-verify="required" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">URL链接</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_LinkUrl" name="F_LinkUrl" autocomplete="off" lay-verify="url" maxlength="255" class="layui-input" placeholder="填写后直接跳转到该网址">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">封面图片</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="F_ImgUrl" id="F_ImgUrl" lay-verify="url" maxlength="255" readonly="readonly">
                                    <button type="button" class="layui-btn" id="j_upload_img_btn">
                                        <i class="layui-icon"></i>上传图片
                                    </button>
                                    <ul id="upload_img_wrap"></ul>
                                    <textarea id="uploadEditor" style="display: none;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <img id="F_ImgUrlPic" width="200" height="200" onclick="previewImg(this)" />
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">排序数字</label>
                                <div class="layui-input-block">
                                    <input type="number" pattern="[0-9]*" id="F_SortCode" name="F_SortCode" lay-verify="required|number" oninput="if(value.length>8)value=value.slice(0,8)" class="layui-input ">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">选项</label>
                                <div class="layui-input-block">
                                    <input id="F_IsTop" name="F_IsTop" type="checkbox" value="true" title="是否置顶">
                                    <input id="F_IsRed" name="F_IsRed" type="checkbox" value="true" title="是否热门">
                                    <input id="F_IsHot" name="F_IsHot" type="checkbox" value="true" title="是否推荐">
                                    <input id="F_EnabledMark" name="F_EnabledMark" type="checkbox" value="true" checked="checked" title="是否发布">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">点击次数</label>
                                <div class="layui-input-block">
                                    <input type="number" pattern="[0-9]*" id="F_Click" name="F_Click" lay-verify="required" class="layui-input" value="0">
                                </div>
                            </div>
                            <div class="form-group-bottom text-right">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form layuimini-form">
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">内容描述</label>
                                <div class="layui-input-block">
                                    <textarea id="F_Description" name="F_Description" type="text/plain" style="width:100%;height:400px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">摘要</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_Zhaiyao" name="F_Zhaiyao" autocomplete="off" class="layui-input" placeholder="不填写则自动截取内容前255字符">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">来源</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_Source" name="F_Source" autocomplete="off" value="本站" lay-verify="required" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label required">作者</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_Author" name="F_Author" autocomplete="off" value="@ViewBag.UserName" lay-verify="required" class="layui-input">
                                </div>
                            </div>
                            <div class="form-group-bottom text-right">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form layuimini-form">
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">Seo标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_SeoTitle" name="F_SeoTitle" autocomplete="off" class="layui-input" placeholder="不填写则默认为网站标题">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">Seo关键字</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_SeoKeywords" name="F_SeoKeywords" autocomplete="off" class="layui-input" placeholder="不填写则默认为网站摘要">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">Seo描述</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_SeoDescription" name="F_SeoDescription" autocomplete="off" class="layui-input" placeholder="不填写则自动截取内容前255字符">
                                </div>
                            </div>
                            <div class="layui-form-item layui-hide">
                                <label class="layui-form-label">Tags标签</label>
                                <div class="layui-input-block">
                                    <input type="text" id="F_Tags" name="F_Tags" autocomplete="off" class="layui-input" placeholder="多个可用英文逗号分隔开，如：a,b">
                                </div>
                            </div>
                            <div class="form-group-bottom text-right">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn site-demo-active" lay-submit lay-filter="saveBtn">
                                        &emsp;保存&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <link href="~/lib/ueditor/themes/default/css/ueditor.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript">
        // 加载 ueditor，传入的初始化参数可以覆盖掉 ueditor.config.js 中的配置
        // 对于同一项目中使用不同的配置的 ueditor 场景非常有用
        var ue = UE.getEditor('F_Description', {
            initialFrameHeight: 250,
            autoFloatEnabled: false, //取消悬浮
            // , initialFrameWidth:796
            zIndex: 0,
            wordCount: false
        });

        // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
        var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled: false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled: true,
            toolbars: [["insertimage", "attachment"]]
        });
    </script>
    <script>
        $(function () {
            // 监听多图上传和上传附件组件的插入动作
            uploadEditor.ready(function () {
                uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
            });
            // 自定义按钮绑定触发多图上传和上传附件对话框事件
            document.getElementById('j_upload_img_btn').onclick = function () {
                var dialog = uploadEditor.getDialog("insertimage");
                dialog.title = '图片上传';
                dialog.render();
                dialog.open();
            };
        });
        // 多图上传动作
        function _beforeInsertImage(t, result) {
            var imageHtml = '';
            $("#F_ImgUrl").val(result[0].src);
            $("#F_ImgUrlPic").attr("src", result[0].src);
            //for (var i in result) {
            //    imageHtml += '<li><img src="' + result[i].src + '" alt="' + result[i].alt + '" height="150"></li>';
            //}
            //document.getElementById('upload_img_wrap').innerHTML = imageHtml;
        }
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            if (height > 400) {
                height = 400;
            }
            if (width > 400) {
                width = 400;
            }
            var imgHtml = "<img src='" + obj.src + "' />";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px', height + 'px'],
                shadeClose: true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
    </script>
</body>

